<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>流程组</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <jsp:include page="/inc/head.jsp" flush="true"/>
    <jsp:include page="/inc/footer.jsp" flush="true"/>
    <script src="${basePath }/js/tip.js"></script>
    <style>

        .list-top{
            width:100%;
            height: 515px;
            border: 1px;
        }
        .mid-area{
            float: left;
            width: 10%;
            height: 500px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 5px;
        }
        .move-button-top{
            text-align: center ;
            margin-top: 200px;
        }
        .move-button{
            text-align: center ;
            margin-botton: 200px;
        }
        .left-area{
            float:left;
            width: 43.7%;
            height: 500px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 5px;
        }
        .content .box {
            border-top: 0;
        }
        .content #rowTable .bootstrap-table .fixed-table-toolbar .icon-refresh {
            padding: 3px 0;
        }
        .content .fixed-table-toolbar .bs-bars, .content .fixed-table-toolbar .columns,.content .fixed-table-toolbar .search {
            margin-top: 0;
        }
        #addActIdentity .bg-info {
            background-color: transparent;
        }
        #group2userModal h4 {
            color:#000;
        }
        #group2userModal .bg-primary,#group2userModal .bg-info {
            background-color: transparent;
        }
        #group2userModal .modal-content {
            padding: 0 15px;
        }
    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini" style="overflow:hidden;">
<!-- Main content -->
<section class="content">
    <div id="toolbar" class="btn-group">
        <shiro:hasPermission name="upms:identity:create">
        <button id="btn_add" type="button" class="btn btn-default" onclick="groupDetailAction(0)">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增组
        </button>
        </shiro:hasPermission>
        <shiro:hasPermission name="upms:identity:create">
        <button id="btn_update" type="button" class="btn btn-default" onclick="groupDetailAction(1)">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改组
        </button>
        </shiro:hasPermission>
        <shiro:hasPermission name="upms:identity:groupSetUser">
        <button id="btn_import" type="button" class="btn btn-default" onClick ="groupToUserAction()">
            <span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span>组内用户
        </button>
        </shiro:hasPermission>
        <shiro:hasPermission name="upms:identity:delete">
        <button id="btn_delete" type="button" class="btn btn-default" onClick ="delGroupAction()">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除组
        </button>
        </shiro:hasPermission>
    </div>

    <div id = "rowTable" class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body table-responsive no-padding">
                    <table id="groupTable">
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加组 -->
    <div id="addActIdentity" class="modal fade bs-example-modal-lg addUpdateInfo" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog " role="document">
            <div class="modal-content" style="width: 600px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel" >添加组</h4>
                </div>
                <div class="modal-body" style="height: 300px;">
                    <form id="groupForm" method="post">
                        <div class="form-group">
                            <label for="groupId">组ID</label>
                            <input id="groupId" type="text" class="form-control" name="groupId" maxlength="20" value="" />
                        </div>
                        <div class="form-group">
                            <label for="groupName">组名称</label>
                            <input id="groupName" type="text" class="form-control" name="groupName" maxlength="20" value="" />
                        </div>
                        <div class="form-group">
                            <label for="type">组描述</label>
                            <input id="type" type="text" class="form-control" name="type" maxlength="32" value="" />
                        </div>
                        <input type="hidden" id="operateType" name="operateType" value="0"/>
                    </form>
                </div>
                <div class="modal-footer bg-info">
                    <button type="button" class="btn green" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="searchFile" onclick="saveGroup(this);">确认</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加组内用户 -->
    <div id="group2userModal" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-full">
            <div class="modal-content" style='width:800px'>
                <div class="modal-header bg-primary" <%--style="background: #29A176;"--%>>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">
                        <i class="icon-pencil"></i>
                        <span class="addFileTitle"  style="font-weight:bold">组添加用户</span>
                    </h4>
                </div>
                <div class="list-top" style="float:left;" >
                    <div class="left-area" style="margin-left: 5px">
                        <div class="top"style="height: 30px;width: 100%;">
                            <span style="font-size: 14px">所有用户列表：</span>
                            <table id="allUserTable"></table>
                        </div>
                    </div>
                    <div class="mid-area">
                        <div class="move-button-top"><button type="button" id="moveLeft" onclick="moveLeft()" class="btn blue" >左移</button></div><br><br>
                        <div  class="move-button"><button type="button" id=moveRight" onclick="moveRight()" class="btn blue">右移</button></div>
                    </div>
                    <div class="left-area" >
                        <div class="top"style="height: 30px;width: 100%;">
                            <span style="font-size: 14px">已加用户列表：</span>
                            <table id="addUserTable"></table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-info" style="clear:left">
                    <button type="button" id="group2user" onclick="saveGroup2User(this)" class="btn blue">调整</button>
                    <button type="button" class="btn green" data-dismiss="modal">退出</button>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
<script type="text/javascript">

    var $groupTable = $("#groupTable");
    //初始化用户与组的数据
    $(function(){
        showGroupTable('${basePath}/pcwindow/getGroup');
    });

    //展示组table
    function showGroupTable(url){
        $groupTable.bootstrapTable({
            url: url,
//            height: 400,
            striped: true,
//            search: true,
            showRefresh: true,
            showColumns: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailView: false,
            detailFormatter: 'detailFormatter',
            pagination: true,
            pageSize: 5,
            pageList:[5],
            paginationLoop: false,
            sidePagination: 'server',
            silentSort: false,
            smartDisplay: false,
            escape: true,
            searchOnEnterKey: true,
            idField: 'id',
            maintainSelected: true,
            toolbar: '#toolbar',
            columns:[
                {field: 'ck', checkbox: true},
                {field: 'id',title: '组ID', align: 'center'},
                {field: 'name', title: '组名称', align: 'center'},
                {field: 'type', title: '组类型', align: 'center'},
                {field: 'action', title: '操作', align: 'center', formatter: 'groupActionFormatter', events: 'actionEvents', clickToSelect: false}
            ],
            onLoadSuccess:function(data){
                //无数据隐藏分页
                if(data && data.total == 0){
                    $('.fixed-table-pagination').hide()
                }
            }
        });
        $groupTable.bootstrapTable('resetView',{height:setHeight()});
    }

    /**
     * 格式化组操作
     */
    function groupActionFormatter(value,row,index){
        return [
            '<shiro:hasPermission name="upms:identity:create"><a class="update" href="javascript:;" onclick="groupDetailAction (1,\'' + row.id +'\');" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a></shiro:hasPermission>&nbsp;&nbsp;&nbsp;',
            '<shiro:hasPermission name="upms:identity:delete"><a class="delete" href="javascript:;" onclick="delGroupAction(\'' + row.id +'\');" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a></shiro:hasPermission>'
        ].join('');
    }
    /**
     *  添加组内用户
     */
    function groupToUserAction(id){
        var rows = $groupTable.bootstrapTable('getSelections');
        if(id==null||typeof(id)=="undefined"){
            if (rows.length != 1) {
                confirmEvent("请选择一条记录！");
                return;
            }else{
                id = rows[0].id;
            }
        }
        $("#allUserTable").bootstrapTable('destroy');
        $("#addUserTable").bootstrapTable('destroy');
        loadAllUser(id);
        showHavUser(id)
        $("#group2user").val(id);
        $("#group2userModal").modal("show");
    }

    /**
     * 添加与修改组
     */
    function groupDetailAction(type,id){
        var title;
        if(type==0){
            title =  '新增组';
            //初始化弹出框
            $("#groupId").val("");
            $("#groupName").val("");
            $("#type").val("");
            $("#groupId").attr("readonly",false);
        }else{
            title =  '修改组';
            var rows = $groupTable.bootstrapTable('getSelections');
            if(id==null||typeof(id)=="undefined"){
                if (rows.length != 1) {
                    confirmEvent("请至少选择一条记录！");
                    return;
                }else{
                    id = rows[0].id;

                }
            }
            $.ajax({
                url:"${basePath}/pcwindow/getGroupByGroupId",
                type:"post",
                data:{"id":id},
                dataType:"json",
                success:function(result){
                    //初始化弹出框
                    $("#groupId").val(result.id);
                    $("#groupName").val(result.name);
                    $("#type").val(result.type);
                    $("#groupId").attr("readonly",true);
                    $("#searchFile").attr("data-id",id);
                }
            });
        }
        $("#exampleModalLabel").text(title);
        // 加载模态框
        $('#addActIdentity').modal({
            keyboard: true
        });
    }

    /**
     * 删除组
     */
    function delGroupAction(id){
        var ids = [];
        var flag = false;
        var rows = $groupTable.bootstrapTable('getSelections');
        if(id==null||typeof(id)=="undefined"){
            if (rows.length == 0) {
                confirmEvent("请至少选择一条记录！");
            }else{
                for (var i in rows) {
                    ids.push(rows[i].id);
                }
                flag = true;
            }
        }else{
            ids.push(id);
            flag = true;
        }
        if(flag){
            var del=confirm("您确定要删除此条记录？");
            if(del==true){
                $.ajax({
                    url:"${basePath}/pcwindow/deleteGroup",
                    type: 'post',
                    data:{"ids":ids.join("-")},
                    dataType:"json",
                    success: function(result) {
                        confirmEvent("删除成功！");
                        $groupTable.bootstrapTable('refresh');
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        confirmEvent('系统开小差了，请稍后再试!');
                    }
                });
            }else{
                return;
            }
        }
    }

    /**
     * 保存组
     * @param evn
     */
    function saveGroup(evn){
        var $this = $(evn);
        var id = $this.attr("data-id");
        $(this).attr("disabled",true);
        var title ;
        if(id==null||typeof(id)=="undefined"){
            $("#operateType").val(0);
            title ="增加";
        }else{
            $("#operateType").val(1);
            title = "修改";
        }
        $.ajax({
            url:"${basePath}/pcwindow/saveGroup",
            data:$("#groupForm").serialize(),
            type:"post",
            dataType:"json",
            success:function(data){
                if(data==1){
                    confirmEvent(title+"成功");
                    $('#addActIdentity').modal("hide");
                    $groupTable.bootstrapTable('refresh');
                }else{
                    confirmEvent("添加失败，该组ID已经存在");
                }
                $this.attr("disabled",false);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                confirmEvent('系统开小差了，请稍后再试!');
                $this.attr("disabled",false);
            }
        });
    }


    /*********************弹出层用户************************/

    var $allUserTable = $("#allUserTable");
    var $addUserTable = $("#addUserTable");
    //加载组
    function loadAllUser(id){
        $allUserTable.bootstrapTable({
            url: '${basePath}/pcwindow/showNoHaveUser/'+id,
            height: 435,
            striped: true,
//                search: false,
            showRefresh: false,
//                showColumns: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailView: false,
            detailFormatter: 'detailFormatter',
            pagination: false,
//                pageSize: 5,
//                pageList:[5],
            paginationLoop: false,
            sidePagination: 'server',
            silentSort: false,
            smartDisplay: false,
            escape: true,
            searchOnEnterKey: true,
            idField: 'id',
            maintainSelected: true,
            toolbar: '#movetoolbar',
            columns:[
                {field: 'ck', checkbox: true},
                {field: 'id',title: '用户ID', align: 'center'},
                {field: 'firstName', title: '账户', align: 'center'},
                {field: 'lastName', title: '姓名', align: 'center'}
//                {field: 'type', title: '组类型', align: 'center'}
            ]
        });
    }

    //展示所拥有的组
    function showHavUser(id){
        $addUserTable.bootstrapTable({
            url: '${basePath}/pcwindow/showHaveUser/'+id,
            height: 435,
            striped: true,
//                search: false,
            showRefresh: false,
//                showColumns: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailView: false,
            detailFormatter: 'detailFormatter',
            pagination: false,
//                pageSize: 5,
//                pageList:[5],
            paginationLoop: false,
            sidePagination: 'server',
            silentSort: false,
            smartDisplay: false,
            escape: true,
            searchOnEnterKey: true,
            idField: 'id',
            maintainSelected: true,
            toolbar: '#movetoolbar',
            columns:[
                {field: 'ck', checkbox: true},
                {field: 'id',title: '用户ID', align: 'center'},
                {field: 'firstName', title: '账户', align: 'center'},
                {field: 'lastName', title: '姓名', align: 'center'}
//                {field: 'type', title: '组类型', align: 'center'}
            ]
        });
    }


    //右移
    function moveRight() {
        var selectContent = $allUserTable.bootstrapTable('getSelections');//获取左边表格数据
        $addUserTable.bootstrapTable("append", selectContent);//放置到右边表格
        var selects = $allUserTable.bootstrapTable('getSelections');//获取左边选中数据
        var id = $.map(selects, function (row) {
            return row.id;
        });
        //删除左边表格数据转移的数据
        $allUserTable.bootstrapTable('remove', {
            field: 'id',	//以那列为标准删除
            values: id		//删除的数据组
        });
    }

    //左移
    function moveLeft(){
        var selectContent = $addUserTable.bootstrapTable('getSelections');//获取右边表格选中的数据
        $allUserTable.bootstrapTable("append", selectContent);//放置到左边边表格
        var selects = $addUserTable.bootstrapTable('getSelections');//获取右边选中数据
        var id = $.map(selects, function (row) {
            return row.id;
        });
        $addUserTable.bootstrapTable('remove', {
            field: 'id',
            values: id
        });
    }

    /**
     * 保存user入组
     */
    function saveGroup2User(evn){
        var groupId = $(evn).val();
        var selectContent = $addUserTable.bootstrapTable('getData');
        var id = $.map(selectContent, function (row) {
            return row.id;
        });
        $.ajax({
            url:"${basePath}/pcwindow/groupSetUser",
            data:{"groupId":groupId,"userIds":id.join("-")},
            type:"post",
            dataType:"json",
            success:function(data){
                $("#group2userModal").modal("hide");
                confirmEvent("调整成功");
            },
            error: function() {
                confirmEvent("调整失败");
            }
        })
    }
    /************************弹出层用户**************************/

    /**
     * 表格高度自适应
     * @return
     * winTop 浏览器视口高度
     * header 顶部通栏
     * breadcrumb 面包屑
     * mainFooter 底部
     */
    function setHeight(){
        var winTop = $(window.top).height(),
            header = window.top.document.querySelector('.main-header').offsetHeight,
            breadcrumb =  window.top.document.querySelector('.breadcrumb').offsetHeight,
            mainFooter = window.top.document.querySelector('.main-footer').offsetHeight;
        return winTop-header-breadcrumb-mainFooter-10;
    }
</script>

</html>
